<template>
<div>
        这是table组件
        <el-button @click="getReq">get请求</el-button>
        <el-button @click="getDelete">Delete请求</el-button>
        <el-button @click="getPost">Post请求</el-button>
        <el-button @click="getPut">Put请求</el-button>
        <el-button @click="addData()">新增</el-button>

        <el-form  :model="formData" label-width="100px" ref="form">
          <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄"  prop="age">
                <el-input v-model="formData.age"></el-input>
          </el-form-item>
           <el-form-item label="存款"  prop="money">
              <el-input v-model="formData.money"></el-input>
          </el-form-item>
           <el-form-item label="手机号"  prop="phone">
                 <el-input v-model="formData.phone"></el-input>
          </el-form-item>
        </el-form>
        {{formData}}
    
    <el-button @click="addData" type="primary">新增数据</el-button>
    <el-button @click="resetForm" type="primary">重置表单</el-button>
    <el-table :data="tableData">
      <el-table-column width="150px" label="学号" prop="id"></el-table-column>
      <el-table-column width="150px" label="姓名" prop="name"></el-table-column>
      <el-table-column width="150px" label="年龄" prop="age"></el-table-column>
      <el-table-column width="150px" label="电话" prop="phone"></el-table-column>
      <el-table-column width="300px" label="钱财" prop="money"></el-table-column>
      <el-table-column  label="操作" fixed="right" width="200px">
        <template slot-scope="scope">
        <el-button type="text"  @click="updateData(scope.row)">更新</el-button>
        <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
        
        </template>
      </el-table-column>
    </el-table>
    
</div>
  
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            tableData:[],
            formData :{
              name:'',
              age:'',
              money:'',
              phone:''
            }
        }
    },
    created(){
        let obj={
            name:'tom',
            age:'10',
            phone:'123'
        }
        console.log(obj);
    //    {...this.obj}
    },
    mounted(){
        this.getTableData()
    },
    methods:{
        //获取表格数据
        getTableData(){
           axios.get('http://127.0.0.1:3000/api/test/list').then(res=>{
               console.log(res);
               this.tableData=res.data
            })
        },
         //调用删除接口，重新获取表格数据
         //http://127.0.0.1:3000/api/test/delete
         //参数{id：123123123}
         //重新调用获取表格数据接口，刷新表格

        deleteRow(row){
            this.$confirm("确定删除该条数据？").then(()=>{
                axios.delete('http://127.0.0.1:3000/api/test/delete',{
               params:{id:row.id}
            }).then(res=>{
                 console.log(res);
                 this.getTableData()
            })
     })    
    },
        //调用新增数据表格
        //http://127.0.0.1:3000/api/test/add
        //{name | age |phone |money}
      
      //this.formData --->{naem:'132',age:'1232'}
      //把对象中的属性在同层级展开
      resetForm(){
          //第一步 :在el-form 上面声明ref属性
          //第二步：在el-form-item
          //第三步：调用resetFields（）方法

          //将formData的对象重置为初始化
          this.$refs.form.resetFields()
           
      },
        addData(){
            axios.post('http://127.0.0.1:3000/api/test/add',this.formData).then(res=>{
                console.log(res);
                this.getTableData()
                this.resetForm()
            })
        },
         //调用修改接口
         //http://127.0.0.1:3000/api/test/update
         //{id:必传参数，name:'新值',age:'新值'}
        updateData(row){
           axios.put('http://127.0.0.1:3000/api/test/update',{
              id:row.id,
              ...this.formData
            //   name:'林俊杰',age:'520'
           }).then(res=>{
                console.log(res);
                this.getTableData()
           })
        },
          
        //传参方式不同
        //get
        getReq(){
          axios.get('http://127.0.0.1:3000/api/test/delete/testDelete',{
                params:{
                   name:'00',
                }
            }).then(res=>{
                console.log(res)
            })
        },
        //delete
        getDelete(){
        axios.delete('http://127.0.0.1:3000/api/test/delete/testDelete',{
                params:{
                    id:'这是id',
                    msg:'这是msg'
                }
            }).then(res=>{
                console.log(res)
            })
        },
        //post
        getPost(){
            axios.post('http://127.0.0.1:3000/api/test/add/testPost',{
                post1:'这是第一参数',
                post2:'这是第二参数'
            }).then(res=>{
                console.log(res)
            })
        },
        //put
        getPut(){
            axios.put('http://127.0.0.1:3000/api/test/update/testUpdate',{
                post1:'这是put第一参数',
                post2:'这是put第二参数'
            }).then(res=>{
                console.log(res)
            })
        },
    }
}
</script>